import React, { Component } from 'react'
import { connect } from 'react-redux'
import PostForm from './PostForm'
import { getPosts } from '../../actions/postActions'
import Spinner from '../../common/Spinner'
import PostFeed from './PostFeed'
// 评论表
export class Posts extends Component {
  componentDidMount () {
    // 请求点赞内容
    this.props.getPosts()
  }
  render () {
    const { posts, loading } = this.props.post;
    let postContent;
    // 如果加载加或者posts为空的时候出现加载动画
    if (posts === null || loading) postContent = <Spinner />
    // 加载评论内容
    else postContent = <PostFeed posts={posts} />
    return (
      <div className="feed">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              {/* 展示评论表单 */}
              <PostForm />
              {/* 展示点赞内容 */}
              {postContent}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  post: state.post
})

const mapDispatchToProps = dispatch => {
  return {
    getPosts: () => {
      dispatch(getPosts())
    }
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Posts)
